<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->
<template>
  <div>
    <div class="header" />
    <div class="rest">
      <div class="left">
        <b>所有餐馆</b>
        <div class="square" />
      </div>
      <div class="right">
        <div
          v-for="restaurant in restaurants"

          :key="restaurant._id"
          class="container"
        >
          <div class="name">
            {{ restaurant.name['zh-CN'] }}
          </div>
          <div
            class="img-box"
            @mouseenter="onMouseOver"
            @mouseleave="onMouseOut"
          >
            <div
              class="first-box"
            >
              <div
                v-show="seen"
                class="rest-food"
                @mouseenter="onMouseOver"
                @mouseleave="onMouseOut"
              >
                <rest-view :restaurant="restaurant" />
              </div>
              <div
                class="first"
                @mouseenter="onMouseOver"
                @mouseleave="onMouseOut"
              >
                <img
                  src="http://49.235.98.65/static/media/dark-dish.a99d1918.png"
                  alt=""
                  class="img1"
                >
                <img
                  :src="img4(restaurant)"
                  class="img-first"
                  alt=""
                >
              </div>
            </div>
            <div class="second-box">
              <div
                v-show="seen"
                class="rest-foods"
                @mouseenter="onMouseOver"
                @mouseleave="onMouseOut"
              />
              <div class="second">
                <span
                  v-show="seen"
                  class="span1"
                  @mouseenter="onMouseOver"
                  @mouseleave="onMouseOut"
                ><rest-view1 :restaurant="restaurant" /></span>
                <img
                  src="http://49.235.98.65/static/media/dark-dish.a99d1918.png"
                  alt=""
                  class="img2"
                >
                <img
                  :src="img5(restaurant)"
                  class="img-second"
                  alt=""
                >
              </div>
            </div>
            <div class="third-box">
              <div
                v-show="seen"
                class="rest-food3"
                @mouseenter="onMouseOver"
                @mouseleave="onMouseOut"
              />
              <div
                :class="['third',{ active:isActive }]"
                @mouseenter="onMouseOver"
                @mouseleave="onMouseOut"
              >
                <span
                  v-show="seen"
                  class="span"
                  @mouseenter="onMouseOver"
                  @mouseleave="onMouseOut"
                ><rest-view2 :restaurant="restaurant" /></span>
                <img
                  src="http://49.235.98.65/static/media/dark-dish.a99d1918.png"
                  alt=""
                  class="img3"
                >
                <img
                  :src="img6(restaurant)"
                  class="img-third"
                  alt=""
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment-timezone';
import _ from 'lodash';
import RestView1 from '@/views/restaurant/components/RestView1.vue';
import RestView2 from '@/views/restaurant/components/RestView2.vue';
import RestView from './components/RestView.vue';

export default {
  components: {
    RestView1,
    RestView2,
    RestView,
  },
  data() {
    return {
      seen: false,
      isActive: false,
      restaurants: [],
      defaultItems: [
        {
          name: {
            'zh-CN': '红烧狮子头',
            'en-US': 'Stewed Lion Head Chinese Meatballs',
          },
          image: 'https://s3.amazonaws.com/ricepo-food/image-3r7hnd04jyk7nbn3.png',
        },
        {
          name: {
            'zh-CN': '三杯鸡',
            'en-US': 'Three Cups Chicken',
          },
          image: 'https://s3.amazonaws.com/ricepo-food/image-5b7jxyy2jvu95frk.png',
        },
        {
          name: {
            'zh-CN': '番茄鸡蛋面',
            'en-US': 'Tomato Egg Noodle',
          },
          image: 'https://s3.amazonaws.com/ricepo-food/image-o1bt3qsjz0fhei4.png',
        },
      ],
    };
  },
  computed: {

  },
  created() {
    this.loadRestaurant();
  },
  methods: {
    async loadRestaurant() {
      try {
        const result = await this.$api.get('/restaurant/location/-74.0059413,40.7127837');
        this.restaurants = result;
        this.restaurants = this.sortRestaurant(this.restaurants);
      } catch (error) {
        // eslint-disable-next-line no-alert
        alert(error.message);
      }
    },
    sortRestaurant(restaurants) {
      const results = _.orderBy(restaurants, ['featured', 'zscore'], ['desc', 'desc']);
      const openarray = [];
      const closearray = [];
      results.forEach((item) => {
        if (this.checkclose(item)) {
          closearray.push(item);
        } else {
          openarray.push(item);
        }
      });
      return openarray.concat(closearray);
    },
    checkclose(restaurant) {
      if (restaurant.closed) {
        return true;
      }
      const day = moment().tz('America/New_York');
      const index = day.isoWeekday() - 1;
      const start = _.get(restaurant, `hours[${index}].start`, 0);
      const end = _.get(restaurant, `hours[${index}].end`, 0);
      const minutes = day.hours() * 60 + day.minutes() * 60;
      if (minutes >= start && minutes <= end) {
        return false;
      }
      return true;
    },
    onMouseOver() {
      this.seen = true;
      this.isActive = true;
    },
    onMouseOut() {
      this.seen = false;
      this.isActive = false;
    },
    img4(restaurants) {
      return _.get(restaurants, 'items[0].image.url', this.defaultItems[0].image);
    },
    img5(restaurants) {
      return _.get(restaurants, 'items[1].image.url', this.defaultItems[1].image);
    },
    img6(restaurants) {
      return _.get(restaurants, 'items[2].image.url', this.defaultItems[2].image);
    },
  },

};
</script>

<style scoped>

.rest{
  display: flex;
}
.span1{
  width: 80px;
  height: 10px;
  margin-left:90px;
  margin-top: -45px;
  position: absolute;
}
.span{
  width: 90px;
  height: 10px;
  margin-left:170px;
  margin-top: -75px;
  position: absolute;
}
.img1{
  width: 160px;
  height: 190px;
}
.img2{
  width: 70px;
  height: 90px;
  margin-left: 80px;
  margin-top: -20px;
}
.img3{
  width: 100px;
  height: 130px;
  margin-top: -50px;
  margin-left: 150px;
}
.img-box{
  width: 300px;
  height: 350px;
  position: relative;
  margin-top: 20px;
  box-shadow: 3px solid gray;
}

.second-box{
  position: absolute;
}
.active{
  transform: translateX(40px) translateY(0px);
  transition: all 0.5s;

}
.name{
  width: 300px;
  display: flex;
  font-size: 24px;
  color: black;
}
.left{
  width: 200px;
  line-height: 130px;
  font-size: 50px;
  margin-left: 130px;
  color: black;
}
.right{
  width: 800px;
  margin-top:30px ;
  margin-left: 280px;
}
.header{
  width: 100px;
  height: 100px;
}
.square{
  height: 5px;
  width: 50px;
  background-color: black;
  margin-top: -40px;
}
.second{
  width: 200px;
  height: 100px;
  margin-top: 10px;
}
.img-third{
  position: absolute;
  width:70px;
  height:70px;
   margin-left:-87px;
   margin-top:-35px
}
.img-second{
  position: absolute;
  width:40px;
  height:40px;
   margin-left:-57px;
   margin-top:-5px
}
.img-first{
  position: absolute;
  width:80px;
  height:80px;
   margin-left:-117px;
   margin-top:35px
}

</style>
